<template>
    <div class="icons">
        <swiper ref="mySwiper">
            <swiper-slide v-for="(page,index) of pages" :key="index">
            <div class="icon" v-for="item of page" :key="item.id">
                <div class="icon-img">
                    <img :src="item.imgUrl">
                </div>
                <p class="icon-title">{{item.desc}}</p>
            </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
export default {
    props:{
        iconList:Array
    },
    name:'HomeIcons',
    computed:{
        pages (){
            const pages = [];
            this.iconList.forEach((item,index) => {
                const page = Math.floor(index/8);
                if(!pages[page]){
                    pages[page] = [];
                }
                pages[page].push(item);
            })
            return pages;
        }
    }
}
</script>
<style lang="scss" scoped>
.icons >>> .swiper-container{
    height:0;
    padding-bottom:50% ;
}
.icons{
    margin-top: .1rem;
    overflow: hidden;
    height: 0;
    padding-bottom:50%;
    background-color: #fff;
}
.icon{
    overflow: hidden;
    position: relative;
    float: left;
    width:25%;
    height: 0;
    padding-bottom: 25%;
}
.icon-img{
    position:absolute;
    top:0;
    left:0;
    right: 0;
    bottom:.44rem;
    text-align: center;
}
img{
    width:60%;
    margin-top:5%;
}
.icon-title{
    position: absolute; 
    left:0;
    right:0;
    bottom:0;
    height: .44rem;
    line-height: .44rem;
    color:#333;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>